<template>
    <!-- 添加角色表单对话框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
        <el-form label-width="120px" ref="formRef" :model="form" :rules="rules">
            <el-form-item label="角色名称:" prop="roleName">
                <el-input v-model="form.roleName" />
            </el-form-item>
            <el-form-item label="角色Code:" prop="roleCode">
                <el-input v-model="form.roleCode" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import type { SysRole } from '../impl';


// 控制对话是否展示的变量
const dialogVisible = ref(false)
const formRef = ref()
const emit =defineEmits(['submit'])
const props = defineProps({
    title: String,
})
const form = ref<SysRole>({
    id: null,
    roleName: '',
    roleCode: '',
})

const rules = ref({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },

    ],
    roleCode: [
        { required: true, message: '请输入角色code', trigger: 'blur' },

    ]


})

//进入添加
const show = (data: SysRole) => {
    dialogVisible.value = true
    if (data && data.id) {
        form.value = { ...data }
    } else {
        form.value = { id: null, roleName: '', roleCode: '' }
    }
}

const handleSubmit = () => {
    formRef.value.validate((valid:boolean) => {
        if (valid) {
            dialogVisible.value =false
            emit('submit',form.value)
        }
    })
 
}



defineExpose({
    show
})
</script>